<template>
	<view>
		<!-- 选择门店部分 -->
		<view class="product-card select-shop" @click="selectShop" style="padding: 50rpx;">
			<view v-if="selectedShopName">{{ selectedShopName }}<span v-if="canSelectShop">(切换)</span></view>
			<view v-else>请选择附近门店</view>
		</view>

		<!-- 循环显示商品 -->
		<view v-for="item in orderInfo.goodInfo" :key="item.id" class="product-card">
            <view class="image-info-wrapper">
                <view class="product-image">
                    <image mode="widthFix" :src="item.goodsDescription"></image>
                </view>
                <view class="product-info">
                    <view class="product-name">{{ item.goodsName }}</view>
                    <view class="product-price">原价： ¥ {{ item.goodsPrice }}</view>
                </view>
            </view>
            <view class="product-footer">
                <view v-for="(subItem, index) in orderInfo.subTitle" :key="index">{{ subItem }}</view>
            </view>
        </view>

		<!-- 显示金额和合计 -->
		<view class="amount-section product-card">
			<view class="amount-item">
				<text>商品金额</text>
				<text>¥ {{ orderInfo.orderInfo.totalAmount }}</text>
			</view>
			<!-- <view class="amount-item">
				<text>优惠金额</text>
				<text>¥ {{ orderInfo.orderInfo.discountAmount }}</text>
			</view> -->
			<view class="amount-item total">
				<text>合计</text>
				<text>¥ {{ orderInfo.orderInfo.payAmount }}</text>
			</view>
		</view>

		<view class="bottom-bar">
			<view class="price">¥ {{orderInfo.orderInfo.payAmount}}</view>
			<button class="purchase-btn" @click="goToBuy()">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					goodInfo: [],
					subTitle: [],
					orderInfo: {
						totalAmount: 0,
						discountAmount: 0,
						payAmount: 0
					}
				},
				shopList: [],
				selectedShopName: null,
				selectedShopId: 0,
                orderId: '',
				canSelectShop: true
			}
		},
		onLoad(options) {
            if (options.orderId) {
                this.orderId = options.orderId;
                this.fetchOrderDetail();
                this.fetchShopList();
            }
			uni.$on('shopSelected', this.handleShopSelected);	
			if (uni.getStorageSync('shopId')) {
				this.canSelectShop = false
			}
        },
		onUnload() {
			// 移除事件监听，防止内存泄漏
			uni.$off('shopSelected', this.handleShopSelected);
		},
		methods: {
			// 获取店铺信息
			fetchShopList() {
				const that = this
				try {
					that.$http.GET('/app/order/order/getShopList', {}, function (res) {
						that.shopList = res.data
					})
				} catch (error) {
					console.error('获取店铺列表失败:', error)
				}
			},
			fetchOrderDetail() {
				let that = this
                try {
					that.$http.GET('/app/order/order/getOrderInfo', {id: that.orderId}, function (res) {
						that.orderInfo = res.data;
						that.selectedShopId = res.data.orderInfo.shopId;
						that.selectedShopName = res.data.orderInfo.shopName;
					}, function (res) {
						console.error('系统繁忙请稍后再试', res);
						uni.showToast({
							title: '请求接口失败',
							icon: 'none'
						});
					})
                } catch (err) {
                    console.error('系统繁忙请稍后再试', err);
                    uni.showToast({
                        title: '请求接口失败',
                        icon: 'none'
                    });
                }
            },
			selectShop() {
				if (!this.canSelectShop) {
					return 
				}
				const that = this
				// uni.showActionSheet({
				// 	itemList: this.shopList.map(shop => shop.name),
				// 	success: (res) => {
				// 		that.selectedShopName = that.shopList[res.tapIndex].name;
				// 		that.selectedShopId = that.shopList[res.tapIndex].id;
				// 	}
				// });
				// uni.navigateTo({
				// 	url: '/pages/index/orderShopSelect.vue?orderId=' + this.orderId
				// });
				that.$tools.routerTo('/pages/index/orderShopSelect', 'navigateTo', 'none');
			},
			handleShopSelected(data) {
				this.selectedShopId = data.shopId;
				this.selectedShopName = data.shopName;
				console.log('已选择门店:', this.selectedShopId, this.selectedShopName);
			},
			goToBuy() {
				const that = this
				this.$http.POST('/app/order/order/getPayParams', {
					id: that.orderId,
					shopId: that.selectedShopId
				}, (res) => {
				if (res.code === 1000) {
					const payParams = res.data;
					uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payParams.timeStamp,
					nonceStr: payParams.nonceStr,
					package: payParams.package,
					signType: payParams.signType,
					paySign: payParams.paySign,
					success: () => {
						console.log('支付成功');
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						that.$tools.routerTo('/pages/index/orderList', 'navigateTo', 'none');
					},
					fail: (err) => {
						console.error('支付失败', err);
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
					});
				} else {
					console.error('获取支付参数失败', res);
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
				}, (err) => {
					console.error('请求接口失败', err);
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style scoped lang="css">
.select-shop {
  padding: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    margin: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    width: calc(100% - 40rpx);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}

.image-info-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.product-image {
    width: 150px;
    margin-right: 10px;
}
.product-image image {
	width: 150px;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-footer {
    width: 100%;
}

.product-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  padding: 0;
}

.product-price {
  font-size: 36rpx;
  color: #e64340;
  font-weight: bold;
}

.amount-section {
  padding: 20rpx;
  background-color: #fff;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
}

.amount-item.total {
  font-weight: bold;
  color: #e64340;
}
.bottom-bar {
  position: fixed;
  bottom: 20px; /* 添加底部间距，使方块脱离底部 */
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 20px; /* 调整为统一圆角 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}

.price {
  font-size: 18px;
  color: #e64340;
}

.purchase-btn {
  background-color: #e64340;
  color: white;
  border-radius: 20px;
  width: 120px;
  margin: 0;
}
</style>
